<template >
  <div class="returnResult">
    <!-- 数据列表 -->
    <div class="top">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <!-- 添加 -->
      <el-button size="small" class="button" @click="tianjia()"
        >添加
      </el-button>
      <el-dialog
        title="添加退货原因"
        :visible.sync="dialogFormVisible"
        width="430px"
      >
        <el-form :model="form">
          <el-form-item label="原因类型:" :label-width="formLabelWidth">
            <el-input v-model="cause" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序:" :label-width="formLabelWidth">
            <el-input v-model="rank" autocomplete="off"></el-input>
          </el-form-item>
         
        </el-form>
        <div slot="footer" class="dialog-footers">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="fn2()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 表格 -->
    <div class="table">
      <template>
        <el-table
          :data="resData"
          height="315"
          border
          style="width: 99%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="" align="center">
          </el-table-column>
          <el-table-column prop="id" label="编号" width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="原因类型"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center">
          </el-table-column>
          <el-table-column prop="showStatus" label="是否显示" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
         class="switch"
                v-model="scope.row.showStatus"
                :active-value="1"
                :inactive-value="0"
                active-text
                inactive-text
                @change="showStatus($event,scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

          <el-table-column prop="createTime" label="添加时间">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="bj(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-dialog
                title="编辑原因"
                :visible.sync="dialogFormVisible1"
                width="430px"
              >
                <el-form>
                  <el-form-item label="原因类型:" :label-width="formLabelWidth">
                    <el-input v-model="causee" autocomplete="off"></el-input>
                  </el-form-item>

                  <el-form-item label="排序:" :label-width="formLabelWidth">
                    <el-input v-model="rankk" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item
                    label="是否启用:"
                    :label-width="formLabelWidth"
                    @change="showStatus"
                  >showStatus
                    <el-switch
                      class="switch"
                      v-model="scope.row.showStatus"
                      :active-value="1"
                      :inactive-value="0"
                      @change="showStatus($event, scope.row)"
                    ></el-switch>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footers">
                  <el-button @click="dialogFormVisible1 = false"
                    >取 消</el-button
                  >
                  <el-button
                    type="primary"
                    @click="fn1(scope.$index, scope.row)"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>

              <el-button type="text" @click="open(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <div class="paging">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-select v-model="formInline.region" placeholder="批量删除">
          <!-- <el-option label="删除" value="shanhai"></el-option> -->
        </el-select>
      </el-form>

      <el-button type="text" id="plsc" @click="open1()">删除</el-button>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 15]"
          :background="true"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      // 划框
      value: "",
      hk: "",
      // 删除数据
      did: "",
      app: "",
      //编辑数据

      formInline: {
        region: "",
      },
      visible: false,

      // 数据
      resData: [],
      // 添加数据
      cause: "",
      rank: "",
      createTime: "",
      sort: "",
      status: "",
      // 编辑
      sy: "",
      dialogFormVisible1: false,
      dialogFormVisible: false,
      rankk: "",
      causee: "",
      form: {
        name: "",
        abb: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      page: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  mounted() {
    this.fn();
  },

  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.fn();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      this.fn();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleClose() {},
    beforeClose() {},
    // 删除
    open(index, element) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        let that = this;
        console.log(element.id);
        var did = that.resData[index].id;
        console.log(did);
        this.$axios
          .post("/returnReason/delete/?ids=" + did, {})
          .then((response) => {
            console.log(response);
            this.fn();
          })
          .catch((error) => {
            console.log(error);
          });
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    // 批量删除
    open1() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let checkArr = this.check;
        let params = [];
        checkArr.forEach(function (item) {
          params.push(item.id);
        });
        console.log(params);
        this.$axios
          .post("/returnReason/delete/?ids=" + params, {})
          .then((response) => {
            console.log(response);
            this.fn();
          })
          .catch((error) => {
            console.log(error);
          });
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },

    handleSelectionChange(val) {
      this.check = val;
      this.multipleSelectionFlag = true;
      if (this.check.length == 0) {
        // 如不进行判断则勾选完毕后批量删除按钮还是会在
        this.multipleSelectionFlag = false;
      }
    },

    // 渲染数据
    fn() {
      this.$axios
        .get("/returnReason/list", {
          params: {
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize,
          },
        })
        .then((response) => {
          this.resData = response.data.data.list;
          this.page = response.data.data;
        });
    },

    // 编辑获取数据
    bj(index, element) {
      let that = this;
      that.sy = index;
      console.log(that.sy)
      that.dialogFormVisible1 = true;
      that.rankk = that.resData[index].sort;
      that.causee = that.resData[index].name;
      console.log(that.rankk)
      console.log(that.causee)
    },
    fn1(index) {
      let that = this;
      console.log(that.sy)
      let app = that.resData[that.sy].id;
      

      this.$axios
        .post("/returnReason/update/" + app, {
          createTime: "2021-03-25T06:33:55.361Z",
          id: 0,
          name: that.causee,
          sort: that.rankk,
          status: 0,
        })
        .then((response) => {
          this.fn()
          that.dialogFormVisible1 = false;
        })
    },

    // 添加数据
    tianjia() {
      this.dialogFormVisible = true;
    },
    fn2() {
      let that = this;
      this.dialogFormVisible = false;
      this.$axios
        .post("/returnReason/create", {
          createTime: "2021-03-21T07:54:50.791Z",
          id: 0,
          name: that.cause,
          sort: that.rank,
          status: 1,
        })
        .then((response) => {
          console.log(response);
          that.fn();
        })

    },

    // 划框
    showStatus($event,element){
         this.$axios
            .post("/returnReason/update/status?ids="+element.id+"&status="+$event, {})
            .then(ret => {
               
               console.log(ret);
            })
    }
  },
};
</script>

<style>
/* 数据列表 */
.top {
  width: 95%;
  height: 20px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
}
.top i {
  width: 30px;
  height: 30px;
}
.top .button {
  float: right;
}
/* 表格 */
.table {
  position: relative;
  top: 60px;
  height: 290px;
  width: 99%;
}

/* 分页 */
.paging {
  width: 100%;
  height: 100px;
  margin-top: 100px;
}
.demo-form-inline {
  float: left;
  margin-right: 30px;
}
.confrim {
  float: left;
}
.block {
  float: right;
  margin-right: 50px;
}

/* 按钮 */

.el-button--text {
  color: #606266;
}
.el-button {
  padding: 10px;
  font-size: 12px;
}
.el-button {
  border: 1px solid rgb(172, 169, 169);
  margin-left: 5px;
}
.el-button:hover {
  border: 1px solid rgb(172, 169, 169);
}
#plsc {
  background-color: #409eff;
  color: white;
  margin-top: 5px;
  padding: 9px 15px;
  border: 1px solid #dcdfe6;
}
</style>